<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
</head>
<body>
<div id="app">
<!--  阻止事件冒泡，.stop应该写在最里面-->
<!--  阻止事件捕获，.prevent应该写在最外面-->
<!--  阻止-->
<div @click="outerClick">
  outer
  <div @click="innerClick">
    inner
    <div @click.stop="contentClick">content</div>
  </div>
</div>
</div>
<script>
  <!--    去除非生产环境的警告提示-->
  Vue.config.productionTip = false
  const vm = new Vue({
    el:'#app',
    data(){
      return{
        //    data中不推荐放函数，因为data是存放数据的地方，vue并没有帮我们处理函数的this问题
      }
    },
    methods: {
      outerClick(){
        console.log('outerClick')
      },
      innerClick(){
        console.log('innerClick')
      },
      contentClick(){
        console.log('contentClick')
      }
    }
  })
  let a = 10
</script>
</body>
</html>